<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      outline-style: none;
      text-decoration: none;
      list-style: none;
      vertical-align: middle;
      font-size: 14px;
      font-family: '微软雅黑';
      color:#fff;
    }
    .box{
      width: 590px;
      height: 470px;
      border: 1px solid #ccc;
      margin: 50px auto;
      overflow: hidden;
      position: relative;
    }
    ul{
      width: 3000px;
      position:absolute;
      left:0;
      top:0;
    }
    li{
      float: left;
    }
    .btns{
      position: absolute;
      top:50%;
      transform: translateY(-50%);
      width: 100%;
      height: 60px;
    }
    .btns a{
      display: block;
      width: 40px;
      height: 60px;
      background-color:rgba(0,0,0,0.5);
      text-align: center;
      line-height: 60px;
      font-family:'宋体';
      float: left;
    }
    .btns a:nth-child(2){
      float: right;
    }
    .dot{
      position: absolute;
      bottom:20px;
      left: 20px;
    }
    .dot span{
      border: 1px solid #ccc;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 10px;
    }
    .active{
      background-color: #fff;
      box-shadow: 0px 0px 5px 5px rgba(255,255,255,0.8);
    }
  </style>
</head>
<body>
  <div class="box">
    <ul>
      <li><a href="http://www.jd.com"><img src="img/1.jpg" alt=""></a></li>
      <li><a href="http://www.jd.com"><img src="img/2.jpg" alt=""></a></li>
      <li><a href="http://www.jd.com"><img src="img/3.jpg" alt=""></a></li>
      <li><a href="http://www.jd.com"><img src="img/4.jpg" alt=""></a></li>
    </ul>
    <div class="btns">
      <a href="javascript:;">&lt;</a>
      <a href="javascript:;">&gt;</a>
    </div>
    <div class="dot">
      <!-- 需要动态生成 -->
      <!-- <span class="active"></span>
      <span></span>
      <span></span>
      <span></span> -->
    </div>
  </div>
  <script>
    //1.先动态生成页码 动态生成span标签
    //span标签的个数：依据页面中图片的个数(或者是li标签的个数)决定的
    var imgs = document.querySelectorAll('li img');
    var dot = document.querySelector('.dot');
    var btn_r = document.querySelector('.btns a:last-child');
    var ul = document.querySelector('ul');
    // console.log(ul)
    for(var i = 0; i < imgs.length; i++){
      var span = document.createElement('span');
      i == 0 ? span.className = 'active' : span.addclassName = '';
      //给每个span注册一个点击事件
      span.onclick = span_click;
      span.myindex = i;
      dot.appendChild(span);
    }
    //点击span标签执行对应的事件
    function span_click(){
      page_index = this.myindex;

      //调用动画
      animate(ul,ul.offsetLeft,-imgs[0].offsetWidth*page_index,50);

      //使用排他法 先移除带有active样式的所有标签
      for(var i = 0; i < dot.children.length; i++){
        dot.children[i].className = '';
        //页码大于等于4的时候(就是最后一张的时候)，给第一个span标签加样式
        if( page_index >= dot.children.length){
          dot.children[0].className = 'active';
        }else{
          dot.children[page_index].className = 'active';
        }
      }
    }



    //代表当前是第几张图片
    var page_index = 0;
    // var current = ul.offsetLeft;
    // var step = 50;
    //点击按钮(显示下一个图片)
    btn_r.onclick = function(){
      //首先通过page_index判断当前是不是最后一张图片
      if(page_index == imgs.length){
        //偷偷将ul的位置改变为0
        ul.style.left = 0;
        //偷偷将页码改变为开始位置0
        page_index = 0;
      }
      page_index ++;
      //改变ul的位置(移动ul位置 显示下一个图片)
      //通过动画的方式改变元素位置
      animate(ul,ul.offsetLeft,-imgs[0].offsetWidth*page_index,50);
      //使用排他法 先移除带有active样式的所有标签
      for(var i = 0; i < dot.children.length; i++){
        dot.children[i].className = '';
        //页码大于等于4的时候(就是最后一张的时候)，给第一个span标签加样式
       if( page_index >= dot.children.length){
        dot.children[0].className = 'active';
       }else{
        dot.children[page_index].className = 'active';
       }
      }
      
      // var target = imgs[0].offsetWidth * page_index;
      // if(ul.timeID){
      //   clearInterval(ul.timeID);
      //   ul.timeID = null;
      // }
      // ul.timeID = setInterval(function(){
      //   if(current > target){
      //     setp = -Math.abs(step)
      //   }
      //   if(Math.abs(current - target) <= Math.abs(step) ){
      //     current = target;
      //     clearInterval(ul.timeID);
      //   }else{
      //     current += step;
      //   }
      //   ul.style.left =  -current + 'px';
      // },30);
    }
    var li = ul.children[0];
    var clone_li = li.cloneNode(true);
    ul.appendChild(clone_li);
    //点击上一页
    var btn_l = document.querySelector('.btns a:first-child');
    btn_l.onclick = function(){
      //判断一下 当前是不是第一张图
      if(page_index == 0){
        //偷偷的将ul的位置改为最后一张图片的位置
        ul.style.left = -imgs[0].offsetWidth*imgs.length + 'px';
        //页码也改为最后一张图片的页码
        page_index = imgs.length;
      }
      page_index --;
      //调用动画
      animate(ul,ul.offsetLeft,-imgs[0].offsetWidth*page_index,50);

      //使用排他法 先移除带有active样式的所有标签
      for(var i = 0; i < dot.children.length; i++){
        dot.children[i].className = '';
        //页码大于等于4的时候(就是最后一张的时候)，给第一个span标签加样式
        if( page_index >= dot.children.length){
          dot.children[0].className = 'active';
        }else{
          dot.children[page_index].className = 'active';
        }
      }
    }
    //实现自动播放
    setInterval(function(){
      //让js自己调用click()方法去执行--注 这个click是个方法 不是事件
      btn_r.click();
    },2000);


    var timeID = null;
    function animate(element,current,target,step){
      if(element.timeID){
        clearInterval(element.timeID);
        element.timeID = null;
      }
      element.timeID = setInterval(function(){
        current = element.offsetLeft;
        if(current > target){
          step = - Math.abs(step);
        };
        if(Math.abs(current - target) <= Math.abs(step)){
          current = target;
          clearInterval(element.timeID);
        }else{
          current += step;
        }
        element.style.left = current + 'px';
      },30);
    };
  </script>
</body>
</html>